<template>
  <el-drawer
    :title="$t('message.ckmp')"
    :visible.sync="isShow"
    :before-close="closeDrawer"
    size="60%"
  >
    <div class="property-title">{{ $t('message.mpxx') }}</div>
    <div class="df">
      <div class="flex1">
        <span class="key">{{ $t('message.mpmc') }}：</span>
        <span v-if="param.name" class="value">{{ param.name }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.syxm') }}：</span>
        <span class="value">{{ param.projectName }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.mpjg') }}：</span>
        <span class="value">{{ param.price }}/{{ $t('message.zhan') }}</span>
      </div>
    </div>
    <div class="mt20 df">
      <div class="flex1">
        <span class="key">{{ $t('message.mpyxq') }}：</span>
        <span class="value">{{ param.type }}</span>
        <span
          v-if="param.type != $t('message.yysjnyx')"
          class="value"
        >,{{ $t('message.sysjd') }}{{
          param.timeFrameUsed[0] + "~" + param.timeFrameUsed[1]
        }}</span>
        <span
          v-if="param.type === $t('message.gdsc')"
          class="value"
        >,{{ $t('message.sysc') }}{{ param.duration }}{{ $t('message.xiaoshi') }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.xsqd') }}：</span>
        <span class="value">{{ param.channel && param.channel.join("｜") }}</span>
      </div>
      <div class="flex1" />
    </div>
    <div class="line-style mt30" />
    <div class="property-title">{{ $t('message.gzsz') }}</div>
    <div class="df">
      <div class="flex1">
        <span class="key">{{ $t('message.xssd') }}：</span>
        <span v-if="param.saleDateStart" class="value">{{
          param.saleDateStart.slice(0, 10)
        }}</span>
        <span class="value"> ~ </span>
        <span v-if="param.saleDateEnd" class="value">{{
          param.saleDateEnd.slice(0, 10)
        }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.rffsl') }}：</span>
        <span class="value">{{ param.circulationDay }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.jccgz') }}：</span>
        <span class="value">{{
          param.inOutNum ? $t('message.xzjc') + param.inOutNum + $t('message.ci') : $t('message.bxz')
        }}</span>
      </div>
    </div>
    <div class="mt20 df">
      <div class="flex1">
        <span class="key">{{ $t('message.sfxg') }}：</span>
        <span class="value">{{
          param.buyNum ? $t('message.mrxg') + param.buyNum + $t('message.zhan') : $t('message.bxg')
        }}</span>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.csjf') }}：</span>
        <span v-if="param.charge === '0'" class="value">{{ $t('message.bjf') }}</span>
        <template v-else>
          <span class="value">{{ $t('message.csjfjfgz') }}：</span>
          <span
            v-if="param.tempItem && param.tempItem.name"
            class="pointer"
            @click="handleTemp"
          >{{ param.tempItem.name }}</span>
        </template>
      </div>
      <div class="flex1">
        <span class="key">{{ $t('message.sysj2') }}：</span>
        <span class="value">{{ param.useDays && param.useDays.join("｜") }}</span>
      </div>
    </div>

    <div class="line-style mt30" />
    <div class="property-title">{{ $t('message.hyzk') }}</div>
    <div>
      <div class="flex1">
        <span class="key">{{ $t('message.zklx') }}：</span>
        <span class="value">{{
          param.discountType === "1" ? $t('message.zdyzk') :$t('message.mrzk')
        }}</span>
      </div>
    </div>
    <div v-if="param.discountType === '1'" class="mt20 discount_wrap">
      <div v-for="item in vipTypes" :key="item.id" class="discount">
        <span v-if="item && item.name" class="key">{{ item.name }}：</span>
        <span class="value">{{ item.value * 10 }}{{ $t('message.zhe') }}</span>
      </div>
    </div>
    <div class="line-style mt30" />
    <div class="property-title">{{ $t('message.qtpz') }}</div>
    <div class="df_ac">
      <span class="key">{{ $t('message.piaoyan') }}：</span>
      <div
        v-if="param.ticketPic1"
        class="file"
        :style="'background-image: url(' + param.ticketPic1 + ')'"
      >
        <el-image
          :preview-src-list="[param.ticketPic1]"
          :src="param.ticketPic1"
        />
      </div>
    </div>
    <div class="mt20">
      <span class="key">{{ $t('message.mpxq') }}：</span>
      <span class="value">{{ param.info }}</span>
    </div>
    <div class="mt20">
      <span class="key">{{ $t('message.gmxz') }}：</span>
      <span class="value">{{ param.purchaseNotes }}</span>
    </div>
  </el-drawer>
</template>

<script>
import {
  cardList,
  getProjectList,
  ticketDefaultPic,
  ticketDetail,
  ticketChargeTemp
} from '@/api'
import dayjs from 'dayjs'
import { applyTimesOptions } from '../ticketAdd/config'
export default {
  name: 'TicketDetail',
  data() {
    return {
      isShow: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      projectList: [],
      firstQueryTime: '',
      vipTypes: [],
      ticketPic: 0,
      imageList: [],
      ticketPicList: [],
      channels: [
        { value: '1', name: this.$t('message.xcx') },
        { value: '2', name: this.$t('message.cgd') }
      ],
      discountTypeList: [
        { value: '0', label: this.$t('message.mrzk') },
        { value: '1', label: this.$t('message.zdyzk') }
      ],
      param: {
        picType: '1',
        projects: [],
        channel: [],
        discountMap: {},
        ticketRules: {
          useItems: ''
        },
        name: '',
        price: '',
        venueId: '',
        type: '', // 门票有效期
        timeFrameUsed: [], // 使用时段
        duration: '', // 使用时长
        useDays: [],
        LimitBuy: '1', // 是否限购
        buyNum: 1, // 限购数量
        charge: '0', // 超时计费判断
        tempId: '', // 模版id
        churuRule: '1', // 进出场次数判断
        inOutNum: 1, // 进出场次数
        counterfoil: ''
      },
      ticketChargeList: [],
      applyTimesOptions
    }
  },
  created() {
    this.getticketChargeTemp() // 获取计费模版
    this.firstQueryTime = this.setTempDate()
    // this.getTicketDetail(this.$route.query.id)
    const venueInfo = JSON.parse(sessionStorage.getItem('venueInfo'))
    if (venueInfo && venueInfo.openTimeStart && venueInfo.openTimeEnd) {
      this.$set(this.param, 'timeFrameUsed', [
        venueInfo.openTimeStart,
        venueInfo.openTimeEnd
      ])
    }
  },
  methods: {
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    getticketChargeTemp() {
      const param = {
        pagination: {
          firstQueryTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          page: 1,
          rows: 100
        },
        filters: {
          name: ''
        }
      }
      ticketChargeTemp({ param }).then((res) => {
        if (res.errorCode !== '000000') return
        this.ticketChargeList = res.recordList
      })
    },
    setTempDate() {
      // 获取时间
      var myDate = new Date()
      return (
        myDate.getFullYear() +
        '-' +
        (myDate.getMonth() + 1) +
        '-' +
        myDate.getDate() +
        ' ' +
        myDate.getHours() +
        ':' +
        myDate.getMinutes() +
        ':' +
        myDate.getSeconds()
      )
    },
    getProjects() {
      getProjectList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: this.firstQueryTime
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          projectName: '',
          type: '1',
          status: ''
        }
      }).then((res) => {
        res.recordList.forEach((item) => {
          if (item.status === '1') {
            this.projectList.push(item)
          }
        })
      })
    },
    getTicket() {
      ticketDefaultPic({}).then((res) => {
        if (res.errorCode === '000000') {
          res.recordList.forEach((item) => {
            if (item.status === '1') {
              this.projectList.push(item)
            }
          })
        }
      })
    },
    getCardList() {
      // 获取卡类型列表
      cardList({
        pagination: {
          page: 1,
          rows: 1000,
          firstQueryTime: this.firstQueryTime
        },
        param: {
          cardName: null,
          isnormal: null,
          channel: null
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            res.recordList.forEach((item) => {
              if (item.status === '1') {
                this.vipTypes.push({
                  name: item.cardName,
                  id: item.id,
                  value: null
                })
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getTicketDetail(id) {
      // 详情 获取卡类型列表 默认票样式 现有项目
      Promise.all([
        ticketDetail({ param: { ticketId: id }}),
        cardList({
          pagination: {
            page: 1,
            rows: 1000,
            firstQueryTime: this.firstQueryTime
          },
          param: {
            cardName: null,
            isnormal: null,
            channel: null,
            type: '1'
          }
        }),
        getProjectList({
          pagination: {
            page: 1,
            rows: 1000,
            firstQueryTime: this.firstQueryTime
          },
          param: {
            venueId: sessionStorage.getItem('venueId'),
            projectName: ''
            // type: '1',
            // status: '1'
          }
        })
      ])
        .then((res) => {
          res[2].recordList.forEach((item) => {
            if (item.status === '1') {
              this.projectList.push(item)
            }
          })
          // this.vipTypes = res[1].recordList
          const discountmap = res[0].record.discount
          this.param = { ...res[0].record }
          this.$set(this.param, 'saleDate', [
            res[0].record.saleDateStart,
            res[0].record.saleDateEnd
          ])
          this.$set(this.param, 'ticketRules', { useItems: '' })
          // 详情回现
          const projects = []
          this.projectList.forEach((i) => {
            res[0].record.projectIds.forEach((item) => {
              if (i.id === item) {
                projects.push(i.projectName)
              }
            })
          })
          const channel = []
          this.channels.forEach((i) => {
            if (res[0].record.channel) {
              res[0].record.channel.split(',').forEach((item) => {
                if (i.value === item) {
                  channel.push(i.name)
                }
              })
            }
          })
          let type = ''
          if (res[0].record.type === '0') {
            type = this.$t('message.yysjnyx')
          } else if (res[0].record.type === '1') {
            type = this.$t('message.gdsd')
            this.$set(this.param, 'timeFrameUsed', [
              res[0].record.useTimeStart,
              res[0].record.useTimeEnd
            ])
          } else {
            type = this.$t('message.gdsc')
            this.$set(this.param, 'timeFrameUsed', [
              res[0].record.useTimeStart,
              res[0].record.useTimeEnd
            ])
          }
          const weekList = res[0].record.weekList || []
          const useDays = []
          weekList.sort()

          applyTimesOptions.forEach((item) => {
            weekList.forEach((i) => {
              if (item.value === i) {
                useDays.push(item.label)
              }
            })
          })
          this.ticketChargeList.forEach((item) => {
            if (item.id === res[0].record.tempId) {
              this.$set(this.param, 'tempItem', item)
            }
          })
          this.$set(this.param, 'projects', projects)
          this.$set(this.param, 'channel', channel)
          this.$set(this.param, 'type', type)
          this.$set(this.param, 'useDays', useDays)
          // 1.5.4 迭代
          this.$set(this.param, 'timeFrameUsed', [
            res[0].record.useTimeStart,
            res[0].record.useTimeEnd
          ])
          this.$set(this.param, 'LimitBuy', '1')
          this.$set(this.param, 'churuRule', '1')
          // this.showTicketImage()

          if (this.param.discountType === '1') {
            res[1].recordList.forEach((item) => {
              if (item.status === '1') {
                this.vipTypes.push({
                  name: item.cardName,
                  id: item.id,
                  value: discountmap[item.id] || 1
                })
              }
            })
          }

          if (res[0].record.discountType === '0') {
            this.$set(this.param, 'discountMap', {})
          } else {
            this.$set(this.param, 'discountMap', discountmap)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleTemp() {
      this.$router.push({
        path: '/chargeRules/overtime',
        query: {
          name: this.param.tempItem.name || ''
        }
      })
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main-container {
  background-color: #fff;
}
.key {
  color: #222222;
  display: inline-block;
}
.value {
  color: #666666;
}
.file {
  width: 84px;
  height: 84px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
}
.discount_wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .key {
    width: 90px;
  }
  .discount {
    width: 33.33%;
    margin-bottom: 20px;
  }
}
</style>
